<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));

    // 1. jsx 可以存入变量
    const span = <span className="c1" id="wrapper">我是span标签</span>
    // 2. jsx 复杂结构用()
    let div = (
        <div>
            <div>
                <h3>复杂结构</h3>
                <p>我是p标签</p>
            </div>
        </div>
    )
    // 3. jsx有唯一根节点
    div = (
        <div>
            <div>我是div</div>
            <p>我是p标签</p>
        </div>
    )

    // 3-1. 文档碎片: 使用文档碎片当做根节点，渲染的时候，并不会出现在真实dom中
    div = (
        <React.Fragment>
            <div>我是div</div>
            <p>我是p标签</p>
        </React.Fragment>
    )
    // 3-2. 写法二： 先解构，在使用
    const {Fragment} = React
    div = (
        <Fragment>
            <div>我是div</div>
            <p>我是p标签</p>
        </Fragment>
    )

    // 3-3. 文档碎片的简写形式：空标签
    div = (
        <>
            <div>我是div</div>
            <p>我是p标签</p>
            <span>我是span标签</span>
        </>
    )

    // root.render(span)

    root.render(div)
</script>

</html>